<template>
  <div class="dynamic">
    <div class="micniv">
      <back></back>
      <span>新动态</span>
      <van-button round type="primary" size="mini" class="btn" @click="release"
        >发布</van-button
      >
    </div>
    <div class="put">
      <ul>
        <li>
          <input
            class="putLine"
            type="text"
            placeholder="写标题更有可能被推荐"
            v-model="title"
          />
        </li>

        <li>
          <textarea
            class="inputLine"
            placeholder="分享你的游泳心得和经验吧！"
            v-model="content"
          ></textarea>
        </li>
      </ul>
      <div class="photo">
        <van-uploader
          v-model="fileList"
          :after-read="onRead"
          multiple
          :max-count="3"
        />
      </div>
    </div>
    <!-- 主体内容 结束 -->
    <tabbar></tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uid: sessionStorage.getItem("uid"),
      fileList: [],
      user: [],
      title: "",
      content: "",
      files: "",
    };
  },
  methods: {
    // 上传图片
    onRead(fileList) {},
    // 发表文章
    release() {
      this.mydate = new Date();
      this.axios.get("/user/checkuid/" + this.uid).then((result) => {
        if (result.data.msg == "ok") {
          this.user = result.data.data;
          let formData = new FormData(); //构造一个 FormData，把后台需要发送的参数添加
          if (this.fileList instanceof Array && this.fileList.length) {
            this.fileList.forEach((item) => {
              formData.append("uploadFile", item.file);
              formData.append("userid", this.user.uid);
              formData.append("f_title", this.title);
              formData.append("f_uname", this.user.uname);
              formData.append("f_content", this.content);
              formData.append("f_autograph", this.user.autograph);
              formData.append("f_date", this.mydate.toLocaleString());
              formData.append("f_avatar", this.user.avatar);
            });
          } else {
            formData.append("uploadFile", this.fileList.file);
            formData.append("userid", this.user.uid);
            formData.append("f_title", this.title);
            formData.append("f_uname", this.user.uname);
            formData.append("f_content", this.content);
            formData.append("f_autograph", this.user.autograph);
            formData.append("f_date", this.mydate.toLocaleString());
            formData.append("f_avatar", this.user.avatar);
          }
          this.axios.post("/find/add", formData).then((result) => {
            if (result.data.msg == "ok") {
              this.$router.push(`/find`);
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.dynamic > .micniv {
  display: flex;
  justify-content: space-around;
  margin-top: 25px;
}
.dynamic > .micniv > span {
  font-size: 18px;
}
.dynamic > .micniv > .btn {
  padding: 10px 10px;
  font-size: 12px;
  margin-right: -30px;
}
.dynamic > .put {
  padding: 40px;
}
.dynamic > .put > ul {
  text-align: left;
}
.dynamic > .put > ul > li > input {
  color: #000;
  width: 100%;
  border: 0;
}
.dynamic > .put > ul > li > input::-webkit-input-placeholder {
  color: #aaa;
}
.dynamic > .put > ul > li > .putLine {
  border-bottom: 1px solid #aaa;
  padding-bottom: 10px;
  font-weight: 600;
  font-size: 14px;
}
.dynamic > .put > ul > li > .inputLine {
  width: 100%;
  height: 180px;
  font-size: 16px;
  margin-top: 10px;
  border:0;
  resize: none;
}
.dynamic .photo {
  margin-top: 50px;
  text-align: left;
}
</style>
